<template>
	<view :style="{ paddingTop: mbConfig + 'rpx',paddingLeft:prConfig+'rpx',paddingRight:prConfig+'rpx'}"
		v-if="tempArr.length">
		<view class="index-product-wrapper" :style="{ background: themeColor,borderRadius: bgStyle+'rpx'}">
			<!-- 单列 -->
			<block v-if="itemStyle == 0">
				<view class="list-box animated listA" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
					<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)">
						<view class="pictrue" :class="'cont'+conStyle">
							<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
							<view v-if="item.stock == 0" class="sell_out">已售罄</view>
							<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }"
								class="border-picture"></view>
						</view>
						<view class="text-info"
							style="display: flex; flex-direction: column; justify-content: space-between;">
							<view>
								<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
								<view class="merchant_info">
									<view v-if="item.merchant && item.merchant.type_name"
										:style="'background:'+labelColor" class="font-bg-red">
										{{item.merchant.type_name}}
									</view>
									<view class="txt" :style="'border-color:'+priceColor+';color:'+priceColor+';'"
										v-if="item.issetCoupon && couponShow">领券</view>
									<view class="txt delivery" v-if="item.delivery_free">包邮</view>
								</view>
							</view>
							<view class="flex ac sb">
								<view v-if="priceShow" class="price acea-row" :style="'color:'+priceColor">
									<view>
										¥
										<text>{{ item.price }}</text>
									</view>
									<view v-if="item.product.ot_price && item.product.ot_price > item.price" class="ot-price">¥{{item.product.ot_price}}</view>
								</view>
								<view v-if="item.sales > 0" class="fs-22 c-999 mt-20">
									<text>已售{{item.sales}}</text>
									<text>+</text>
								</view>
							</view>
							<view class="fw mt-5 fs-22 flex ac w-100p" v-if='item.svip_price && item.svip_price > 0'>
								<view>
									<text>¥</text>
									<text>{{item.svip_price }}</text>
								</view>
								<view>
									<image style="width: 70rpx;height: 30rpx;" class="vipimage"
										:src="`${domain}/static/images/svip.png`"></image>
								</view>
							</view>

						</view>
					</view>
				</view>
			</block>
			<!-- 两列 -->
			<block v-if="itemStyle == 1">
				<view class="list-box listS animated" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
					<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)"
						:class="'bg'+conStyle">
						<view class="pictrue picture1" :class="'cont'+conStyle">
							<!-- <image :src="item.image" mode=""></image> -->
							<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
							<view v-if="item.stock == 0" class="sell_out">已售罄</view>
							<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }"
								class="border-picture"></view>
							<view v-if="userInfo && userInfo.is_promoter == 1 && item.share_price > 0 && !sonShop"
								class="pos-a pos-r" style="top: 60rpx;left: 0rpx;z-index: 999;">
								<image src="https://yjgs.jsonbug.com/test/fxzq.png" mode="widthFix"
									style="width: 120rpx;"></image>
								<view class="pos-a c-white fw" style="font-size: 22rpx;top: 3rpx;left: 38rpx;">
									{{item.share_price}}
								</view>
							</view>
						</view>
						<view class="text-info">
							<view v-if="titleShow" class="title line1">{{ item.store_name }}</view>
							<view class="flex ac sb">
								<view v-if="priceShow" class="price acea-row" :style="'color:'+priceColor">
									<view>¥<text>{{ item.price }}</text></view>
									<view v-if="item.product.ot_price && item.product.ot_price > item.price" class="ot-price">¥{{item.product.ot_price}}</view>
								</view>
								<view v-if="item.sales > 0 && sell_num == 1" class="fs-22 c-999 mt-20">
									<text>已售{{item.sales}}</text> 
									<text>+</text>
								</view>
							</view>
							<view class="fw mt-5 fs-22 flex ac w-100p" v-if='item.svip_price && item.svip_price > 0'>
								<view>
									<text>¥</text>
									<text>{{item.svip_price }}</text>
								</view>
								<view>
									<image style="width: 70rpx;height: 30rpx;" class="vipimage"
										:src="`${domain}/static/images/svip.png`"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 三列 -->
			<block v-if="itemStyle == 2">
				<view class="list-box animated listB" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
					<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)">
						<view class="pictrue" :class="'cont'+conStyle">
							<!-- <image :src="item.image" mode=""></image> -->
							<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
							<view v-if="item.stock == 0" class="sell_out">已售罄</view>
							<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }"
								class="border-picture"></view>
						</view>
						<view class="text-info"
							style="display: flex; flex-direction: column; justify-content: space-between;">
							<view v-if="titleShow" class="title line1">{{ item.store_name }}</view>
							<view class="flex ac sb">
								<view v-if="priceShow" class="price">
									<view v-if="priceShow" :style="'color:'+priceColor">
										¥<text>{{ item.price }}</text>
									</view>
									<view v-if="item.product.ot_price && item.product.ot_price > item.price" class="ot-price">¥{{item.product.ot_price}}</view>
								</view>
								<view v-if="item.sales > 0" class="fs-22 c-999 mt-20">
									<text>已售{{item.sales}}</text>
									<text>+</text>
								</view>
							</view>
							<view class="fw mt-5 fs-22 flex ac w-100p" v-if='item.svip_price && item.svip_price > 0'>
								<view>
									<text>¥</text>
									<text>{{item.svip_price }}</text>
								</view>
								<view>
									<image style="width: 70rpx;height: 30rpx;" class="vipimage"
										:src="`${domain}/static/images/svip.png`"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<!--大图-->
			<block v-if="itemStyle == 3">
				<view class="list-box animated listC" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
					<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)"
						:style="'border-radius:'+bgStyle+'rpx;'">
						<view class="pictrue" :class="'cont'+conStyle">
							<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
						</view>
						<view class="text-info"
							style="display: flex; flex-direction: column; justify-content: space-between;">
							<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
							<view class="flex ac sb w-100p  ">
								<view class="flex ac">
									<view v-if="priceShow || opriceShow" class="price">
										<view v-if="priceShow" :style="'color:'+priceColor">
											<text>￥</text>
											{{ item.price }}
										</view>
										<view v-if="item.product.ot_price && item.product.ot_price > item.price" class="old-price">¥{{item.product.ot_price}}</view>
									</view>
									<view v-if="item.sales > 0" class="fs-22 c-999 mt-25 ml-10">
										<text>已售{{item.sales}}</text>
										<text>+</text>
									</view>
								</view>
								<view class="fw fs-26 flex ac  " style="margin-top: 25rpx;"
									v-if='item.svip_price && item.svip_price > 0'>
									<view>
										<text>¥</text>
										<text>{{item.svip_price }}</text>
									</view>
									<view>
										<image style="width: 70rpx;height: 30rpx;" class="vipimage"
											:src="`${domain}/static/images/svip.png`"></image>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		getProductData
	} from '@/api/api.js';
	import easyLoadimage from "@/components/easy-loadimage/easy-loadimage.vue"
	export default {
		name: 'goodList',
		components: {
			easyLoadimage
		},
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			merId: {
				type: String || Number,
				default: ''
			},
			platformType: {
				type: String || Number,
				default: '1'
			}
		},
		computed: {
			...configMap(['sell_num']),
			...mapGetters(['userInfo']),
			currentAddr() {
				return this.$store.state.extend.currentAddr
			},
			sonShop(){
				return this.$store.state.extend.sonShop
			}
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				tempArr: [],
				mbConfig: 0,
				prConfig: 0,
				numConfig: 0,
				themeColor: '',
				priceColor: '',
				labelColor: '',
				itemStyle: 0,
				sortType: 0,
				conStyle: 0,
				bgStyle: '0',
				type: 0,
				selectId: 0,
				productIds: [],
				titleShow: false,
				priceShow: false,
				couponShow: false,
				diy_id: '',
				unique: '',
			};
		},
		created() {
			console.log(this.userInfo,'userInfo')
		},
		mounted() {
			if (!this.dataConfig) {
				console.warn('dataConfig is undefined');
				return;
			}

			this.mbConfig = (this.dataConfig?.mbConfig?.val || 0) * 2;
			this.prConfig = (this.dataConfig?.prConfig?.val || 0) * 2;
			this.numConfig = this.dataConfig?.numConfig?.val || 0;
			this.themeColor = this.dataConfig?.themeColor?.color?.[0]?.item || '';
			this.priceColor = this.dataConfig?.fontColor?.color?.[0]?.item || '';
			this.labelColor = this.dataConfig?.labelColor?.color?.[0]?.item || '';
			this.itemStyle = this.dataConfig?.itemStyle?.type || 0;
			this.sortType = this.dataConfig?.goodsSort?.type || 0;
			this.conStyle = this.dataConfig?.conStyle?.type || 0;
			this.bgStyle = this.dataConfig?.bgStyle?.type ? '20' : '0';
			this.type = this.dataConfig?.tabConfig?.tabVal || 0;
			this.selectId = this.dataConfig?.selectConfig?.activeValue || 0;
			this.productIds = this.dataConfig?.goodsList?.ids || [];
			this.titleShow = this.dataConfig?.titleShow?.val || false;
			this.priceShow = this.dataConfig?.priceShow?.val || false;
			this.couponShow = this.dataConfig?.couponShow?.val || false;
			this.diy_id = this.dataConfig?.did || '';
			this.unique = this.dataConfig?.timestamp || '';

			if (this.dataConfig) {
				this.productslist();
				uni.$on('addreChangeReferList', () => {
					this.productslist();
				})
			}
		},
		methods: {
			productslist() {
				let data = {};
				if (this.type == 1) {
					data = {
						diy_id: this.diy_id,
						unique: this.unique,
						mer_id: this.merId,
						platform_type: this.platformType,
						product_ids: this.productIds ? this.productIds.join(',') : '',
						limit: this.productIds.length,
					};
				} else {
					data = {
						diy_id: this.diy_id,
						unique: this.unique,
						mer_id: this.merId,
						platform_type: this.platformType,
						order: this.sortType == 2 ? 'price_asc' : this.sortType == 1 ? 'sales' : '',
						limit: this.numConfig,
					};
					if (this.merId) {
						data.mer_cate_id = (this.selectId && this.selectId.toString()) || ''
					} else {
						data.cate_pid = (this.selectId && this.selectId.toString()) || ''
					}
				}

				if (this.currentAddr.isShow) {
					data['type'] = this.currentAddr.type;
					data['id'] = this.currentAddr.id;
				}

				getProductData(data).then(res => {
					this.tempArr = res.data.list;
				});
			},


			goDetail(item) {
				this.$emit('detail', item);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.vipimage {
		width: 70rpx;
		height: 30rpx;
		margin-left: 6rpx;
		position: relative;
	}

	.index-product-wrapper {
		margin: 0 20rpx;
		padding: 20rpx 20rpx 0;

		.list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				width: 328rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				position: relative;

				&.on {
					border-radius: 0;
				}

				.pictrue_log {
					width: 92rpx;
					height: 44rpx;
					font-size: 26rpx;
					line-height: 44rpx;
				}

				.pictrue,
				/deep/image,
				/deep/.easy-loadimage,
				/deep/uni-image {
					width: 100%;
					display: block;
					position: relative;

					.border-picture {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: center/cover no-repeat;
					}
				}

				.picture1,
				/deep/.picture1 image,
				/deep/.picture1 .easy-loadimage,
				/deep/.picture1 uni-image {
					height: 346rpx;
					position: relative;

					.border-picture {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: center/cover no-repeat;
					}

					.sell_out {
						display: flex;
						width: 150rpx;
						height: 150rpx;
						align-items: center;
						justify-content: center;
						border-radius: 100%;
						background: rgba(0, 0, 0, .6);
						color: #fff;
						font-size: 30rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: -75rpx 0 0 -75rpx;

						&::before {
							content: "";
							display: block;
							width: 140rpx;
							height: 140rpx;
							border-radius: 100%;
							border: 1px dashed #fff;
							position: absolute;
							top: 5rpx;
							left: 5rpx;
						}
					}
				}

				.cont1,
				/deep/.cont1 image,
				/deep/.cont1 .easy-loadimage,
				/deep/.cont1 uni-image,
				.cont1 .border-picture {
					border-radius: 16rpx;
				}

				.text-info {
					padding: 10rpx 20rpx 15rpx;

					.title {
						color: #222222;
					}

					.old-price {
						margin-top: 4rpx;
						font-size: 26rpx;
						color: #999;
						text-decoration: line-through;

						text {
							margin-right: 2px;
							font-size: 20rpx;
						}
					}

					.price {
						display: flex;
						margin-top: 20rpx;
						font-size: 26rpx;
						align-items: center;

						text {
							font-size: 36rpx;
							font-weight: 550;
						}

						.ot-price {
							color: #aaa;
							font-size: 24rpx;
							text-decoration: line-through;
							margin-left: 6rpx;
							font-weight: normal;
							margin-top: 10rpx;
						}
					}
				}

				.pictrue {
					position: relative;
				}

				.border-picture {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
					background: center/cover no-repeat;
				}
			}

			.merchant_info {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.merchant_type {
					color: #fff;
					line-height: 30rpx;
					padding: 0 10rpx;
					border-radius: 2rpx;
					font-size: 22rpx;
				}

				.txt {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 4rpx;
					height: 28rpx;
					margin-left: 15rpx;
					border: 1px solid $theme-color;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: normal;

					&.delivery {
						color: #FF9000;
						border-color: #FF9000;
					}
				}
			}

			&.on {
				display: flex;
			}

			&.listA {
				.item {
					display: flex;
					width: 100%;

					.pictrue,
					/deep/image,
					/deep/.easy-loadimage,
					/deep/uni-image {
						width: 220rpx;
						height: 220rpx;
					}

					.sell_out {
						display: flex;
						width: 110rpx;
						height: 110rpx;
						align-items: center;
						justify-content: center;
						border-radius: 100%;
						background: rgba(0, 0, 0, .6);
						color: #fff;
						font-size: 24rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: -55rpx 0 0 -55rpx;

						&::before {
							content: "";
							display: block;
							width: 100rpx;
							height: 100rpx;
							border-radius: 100%;
							border: 1px dashed #fff;
							position: absolute;
							top: 5rpx;
							left: 5rpx;
						}
					}

					.text-info {
						width: 490rpx;
					}
				}
			}

			&.listB {
				justify-content: inherit;

				.item {
					width: 31.3%;
					margin-right: 3.05%;

					.pictrue,
					/deep/image,
					/deep/.easy-loadimage,
					/deep/uni-image {
						height: 220rpx;
					}

					.sell_out {
						display: flex;
						width: 110rpx;
						height: 110rpx;
						align-items: center;
						justify-content: center;
						border-radius: 100%;
						background: rgba(0, 0, 0, .6);
						color: #fff;
						font-size: 24rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: -55rpx 0 0 -55rpx;

						&::before {
							content: "";
							display: block;
							width: 100rpx;
							height: 100rpx;
							border-radius: 100%;
							border: 1px dashed #fff;
							position: absolute;
							top: 5rpx;
							left: 5rpx;
						}
					}

					&:nth-child(3n) {
						margin-right: 0;
					}

					.price {
						font-size: 20rpx;

						text {
							font-size: 28rpx;
						}
					}

					.text-info {
						padding: 10rpx 4rpx;
					}
				}
			}

			&.listC {
				.item {
					width: 100%;

					.pictrue,
					/deep/image,
					/deep/.easy-loadimage,
					/deep/uni-image {
						height: 320rpx;
					}

					.price {
						margin-top: 20rpx;
						font-size: 40rpx;
						display: flex;
						align-items: center;

						.old-price {
							font-weight: normal;
							font-size: 22rpx;
							margin-left: 10rpx;
						}
					}
				}
			}

			&.listS {
				.item {
					background: #ffffff;
				}

				.price {
					font-size: 40rpx;
					display: flex;
					align-items: baseline;

					.old-price {
						font-weight: normal;
						font-size: 22rpx;
						margin-left: 10rpx;
					}
				}

				.cont1,
				/deep/.cont1 image,
				/deep/.cont1 .easy-loadimage,
				/deep/.cont1 uni-image,
				.cont1 .border-picture {
					border-radius: 16rpx 16rpx 0 0;
				}

				.bg1 {
					border-radius: 16rpx;
				}
			}
		}
	}
</style>